<template>
  <Section backgroundColor="gray" padding="20px 20px 5px 20px" width="15vw">
    <el-icon class="delete-icon" @click="onDelete"><Delete /></el-icon>
    <span class="field-label">{{ field.label }}</span>
    <el-form-item :prop="field.name" class="custom-form-item">
      <template v-if="field.type === 'string'">
        <GapedRow width="100%">
          <el-select
            v-model="form[`${field.name}_operator`]"
            placeholder="请选择"
          >
            <el-option label="包含" value="包含" />
          </el-select>
          <el-input v-model="form[field.name]" placeholder="请输入内容" />
        </GapedRow>
      </template>
      <template v-else-if="field.type === 'date'">
        <GapedRow width="100%">
          <el-select
            v-model="form[`${field.name}_operator`]"
            placeholder="请选择"
            style="margin-right: 10px"
          >
            <el-option label="区间" value="区间" />
          </el-select>
          <el-date-picker
            v-model="form[field.name]"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </GapedRow>
      </template>
      <template v-else-if="field.type === 'number'">
        <GapedRow width="100%">
          <el-select
            v-model="form[`${field.name}_operator`]"
            placeholder="请选择"
            style="margin-right: 10px"
          >
            <el-option label="=" value="=" />
            <el-option label=">" value=">" />
            <el-option label=">=" value=">=" />
            <el-option label="<" value="<" />
            <el-option label="<=" value="<=" />
            <el-option label="<>" value="<>" />
          </el-select>
          <el-input-number v-model="form[field.name]" :min="0" />
        </GapedRow>
      </template>
    </el-form-item>
  </Section>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import { Section, GapedColumn, GapedRow } from '@/core/components'
import { Delete } from '@element-plus/icons-vue'

const props = defineProps({
  field: {
    type: Object,
    required: true,
  },
  form: {
    type: Object,
    required: true,
  },
})

const emit = defineEmits(['delete'])

const onDelete = () => {
  emit('delete', props.field)
}
</script>

<style scoped>
.field-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.custom-form-item {
  position: relative;
  margin-bottom: 0 !important;
}

.delete-icon {
  position: absolute;
  right: 2px;
  top: 2px;
  cursor: pointer;
  color: #f56c6c;
  font-size: 16px;
  z-index: 2;
}

.delete-icon:hover {
  color: #ff0000;
}

.field-label {
  position: absolute;
  left: 2px;
  top: 2px;
  font-size: 12px;
  font-weight: 800;
  color: white;
  z-index: 1;
}
</style>
